<template>
  <div class="container">
    <div class="cut-wrapper">
      <img ref="imgRef" :src="Bg" alt="" />
    </div>
  </div>
</template>
<script setup>
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";
import Bg from "@/assets/bg.jpg";

const imgRef = ref();

let cropper;

function initCropper() {
  cropper = new Cropper(imgRef.value, {
    aspectRatio: 1,
    dragMode: "move",
    autoCrop: false,
    background: false,
  });
}

function getCutFile() {
  cropper.getCroppedCanvas({ mageSmoothingQuality: "high" }).toBlob((blob) => {
    const file = new File([blob], "cut.png");
    console.log(file);
  });
}

onMounted(() => {
  initCropper();
});
</script>

<style scoped lang="scss">
.cut-wrapper {
  width: 600px;
  height: 600px;
  border: 1px dashed black;
}
</style>
